<template>
	<view class="content" style="position: relative; height: 0rpx;">
		<view class="banner">
      <view class="an">
        <view class="maxCon">
          <view class="rtMove">
            <image class="tuB" src="./images/tuB.png" />
            <image class="guangA" src="./images/guang.png" />
            <image class="guangB" src="./images/guang.png" />
            <image class="tuC" src="./images/tuC.png" />
            <image class="lingxA" src="./images/lingxA.png" />
            <image class="lingxB" src="./images/lingxB.png" />
            <image class="lingxC" src="./images/lingxC.png" />
            <image class="lingxD" src="./images/lingxD.png" />
            <image class="lingxE" src="./images/lingxE.png" />
            <image class="lingxF" src="./images/lingxF.png" />
            <image class="chaunB" src="./images/chaunB.png" />
            <image class="chaunC" src="./images/chaunB.png" />
            <image class="tuA" src="./images/tuA.png" />
            <image class="tuAa" src="./images/tuA.png" />
            <image class="ziA" src="./images/ziA.png" />
            <image class="ziB" src="./images/ziB.png" />
            <image class="ziC" src="./images/ziC.png" />
            <image class="ma tuAn" src="./images/tuAn.png" />
            <image class="ma tuMing" src="./images/tuMing.png" />
            <image class="ren" src="./images/ren.png" />
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<style lang="less" scoped>
.banner {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: -10;
        background-repeat: no-repeat;
        background-position: center;
      }
      .maxCon {
        height: 1000rpx;
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }

      .rtMove {
        width: 888rpx;
        height: 860rpx;
        position: absolute;
        right: 140rpx;
        top: 80rpx;
        background-image: url(./images/banner.png);
        background-position: center bottom;
        background-repeat: no-repeat;
      }

      .rtMove .tuB {
        position: absolute;
        top: 220rpx;
        left: 196rpx;
        width: 180rpx;
        height: 180rpx;
        animation: tuB 1.5s ease-in-out infinite;
      }

      .rtMove .guangA {
        position: relative;
        top: 612rpx;
        left: 560rpx;
        width: 60rpx;
        height: 60rpx;
        animation: guangA 1.5s ease-in-out infinite;
      }
      .rtMove .guangB {
        position: absolute;
        top: 532rpx;
        left: 500rpx;
        width: 60rpx;
        height: 60rpx;
        animation: guangB 1.5s ease-in-out infinite;
      }
      .rtMove .tuC {
        position: absolute;
        top: 466rpx;
        left: 352rpx;
        width: 150rpx;
        height: 110rpx;
        animation: tuC 1.5s ease-in-out infinite;
      }

      .rtMove .lingxA {
        position: absolute;
        top: 276rpx;
        left: 146rpx;
        width: 40rpx;
        height: 40rpx;
        animation: lingxA 1.1s linear infinite;
      }
      .rtMove .lingxB {
        position: absolute;
        top: 172rpx;
        left: 196rpx;
        width: 40rpx;
        height: 40rpx;
        animation: lingxB 1.1s linear infinite;
      }
      .rtMove .lingxC {
        position: absolute;
        top: 360rpx;
        left: 264rpx;
        width: 40rpx;
        height: 40rpx;
        animation: lingxC 1.1s linear infinite;
      }
      .rtMove .lingxD {
        position: absolute;
        top: 302rpx;
        left: 410rpx;
        width: 40rpx;
        height: 40rpx;
        animation: lingxC 1.1s linear infinite;
      }
      .rtMove .lingxE {
        position: absolute;
        top: 190rpx;
        left: 364rpx;
        width: 40rpx;
        height: 40rpx;
        animation: lingxA 1.1s linear infinite;
      }
      .rtMove .lingxF {
        position: absolute;
        top: 144rpx;
        left: 280rpx;
        width: 40rpx;
        height: 40rpx;
        animation: lingxA 1.1s linear infinite;
      }

      .rtMove .chaunB {
        position: absolute;
        top: 64rpx;
        left: 636rpx;
        width: 100rpx;
        height: 200rpx;
        animation: chaunB 1.1s linear infinite;
      }
      .rtMove .chaunC {
        position: absolute;
        top: -90rpx;
        left: 638rpx;
        width: 100rpx;
        height: 200rpx;
        animation: chaunC 1.1s linear infinite;
      }
      .rtMove .tuA {
        position: absolute;
        top: 274rpx;
        left: 630rpx;
        width: 140rpx;
        height: 100rpx;
        animation: tuA 1.1s linear infinite;
      }
      .rtMove .tuAa {
        position: absolute;
        top: 196rpx;
        left: 630rpx;
        width: 140rpx;
        height: 100rpx;
        animation: tuAa 1.1s linear infinite;
      }
      .rtMove .ziA {
        position: absolute;
        top: 160rpx;
        left: 640rpx;
        width: 100rpx;
        height: 80rpx;
      }
      .rtMove .ziB {
        position: absolute;
        top: 260rpx;
        left: 640rpx;
        width: 100rpx;
        height: 80rpx;
      }
      .rtMove .ziC {
        position: absolute;
        top: 120rpx;
        left: 660rpx;
        width: 80rpx;
        height: 60rpx;
      }
      .rtMove .ma {
        position: absolute;
        top: 494rpx;
        left: 608rpx;
        width: 100rpx;
        height: 100rpx;
      }
      .rtMove .ren {
        position: absolute;
        top: 568rpx;
        left: 666rpx;
        width: 160rpx;
        height: 200rpx
      }

      @keyframes tuB {
  0% {
    transform: translateY(0);
  }

  50%{
    transform: translateY(40rpx);
  }

  100% {
    transform: translateY(0);
  }
}


@keyframes guangA{
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate(-110rpx, -68rpx);
  }
}

@keyframes guangB{
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate(120rpx, 66rpx);
  }
}

@keyframes tuC{
  0%{
    opacity: 0;
    transform: translate(0,0);
  }
 
  40%{
    opacity: 1;
  }
  90%,
  100%{
    opacity: 1;
    transform: translate(100rpx, 50rpx);
  }
}

@keyframes lingxA{
  0%{
    opacity: 1;
    transform: translateY(-16rpx);
  }
  60% {
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translateY(-120rpx);
  }
}

@keyframes lingxB{
  0%{
    opacity: 1;
    transform: translateY(-16rpx);
  }
  
  40%{
    opacity: 1;
  }

  90%,100%{
    opacity: 0;
    transform: translateY(-120rpx);
  }
}

@keyframes lingxC{
  0%{
    opacity: 1;
    transform: translateY(-16rpx);
  }
  
  50%{
    opacity: 1;
  }

  50%,100%{
    opacity: 0;
    transform: translateY(-100rpx);
  }
}

@keyframes chaunB{
  0%{
    opacity: 1;
    transform: translateY(0px);
  }
  

  100%{
    opacity: 0;
    transform: translateY(-140rpx);
  }
}

@keyframes chaunC{
  0%{
    opacity: 1;
    transform: translateY(0px);
  }

  100%{
    opacity: 0;
    transform: translateY(-80rpx);
  }
}

@keyframes tuA{
  0%{
    opacity: 1;
    transform: translateY(0px);
  }
 
  60%{
    opacity: 1;
  }

  100%{
    opacity: 0;
    transform: translateY(-240rpx);
  }
}

@keyframes tuAa{
  0%, 30%{
    opacity: 1;
    transform: translateY(0rpx);
  }
  60%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translateY(-120rpx);
  }
}

@keyframes ziA{
  0%, 20%, 40%, 60%, 80% {
    transform: translateY(0);
  }
  10%, 50% {
      transform: translateY(-8rpx);
  }
  30%, 70% {
      transform: translateY(8rpx);
  }
}

@keyframes ziB{
  0%, 20%, 40%, 60%, 80% {
    transform: translateY(0);
  }
  10%, 50% {
      transform: translateY(6rpx);
  }
  30%, 70% {
      transform: translateY(-6rpx);
  }
}

@keyframes ziC{
  0%, 20%, 40%, 60%, 80% {
    transform: translateY(0);
  }
  10%, 50% {
      transform: translateY(-4rpx);
  }
  30%, 70% {
      transform: translateY(6rpx);
  }
}

@keyframes tuMing{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

</style>
